<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* 字符 */
        .iconfont {
            font-size: 20px;
        }

        /* 顶部盒子 */
        .w {
            height: 40px;
        }

        /* 顶部左 */
        .a1 {
            width: 270px;
            float: left;
            color: #BC8F90;
            font-weight: bold;
            line-height: 40px;
            text-align: center;
        }

        /* 顶部右 */
        .a2 {
            float: right;
        }

        /* 文字 */
        .al {
            float: left;
            line-height: 40px;
            color: #BBCEEA;
        }

        /* 图片 */
        .ar {
            float: left;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 65px;
        }

        /* 中部背景 */
        .boxf {
            height: 500px;
            background-color: #e4e4e4;
        }

        /* 蓝色盒子 */
        .boxleft {
            width: 270px;
            height: 480px;
            background-color: #F0F8FF;
            margin-top: 10px;
            margin-left: 10px;
            float: left;
        }

        /* 第一个盒子 */
        .b1 {
            border-bottom: dashed;
            border-color: #E4E4E4;
            border-width: 5px;

        }

        /* 图片 */
        .btop {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            position: relative;
            left: 65px;
        }

        /* 第一行文字 */
        .word1 {
            font-size: 15px;
            text-align: center;
        }

        /* 第二行文字 */
        .word2 {
            font-size: 7px;
            color: #C3BBBA;
            text-align: center;
        }

        /* 第三行数据 */
        .bbom {
            text-align: center;
            margin-bottom: 15px;
        }

        /* 第三行数据 */
        .word3 {
            color: #8e687c;
            margin-right: 5px;
        }

        /* 第二个盒子 */
        .b2 {
            padding-bottom: 15px;
            border-bottom: dashed;
            border-color: #E4E4E4;
            border-width: 5px;
        }

        /* 字符 */
        .picword {
            margin-top: 15px;
            margin-left: 20px;

        }

        /* 头部文字 */
        .word4 {
            font-size: 10px;
            font-weight: bold;
        }

        /* 小字 */
        .word5 {
            font-size: 5px;
        }

        /* 第三个盒子的小盒子 */
        .picword1 {
            display: inline;
            margin-left: 40px;
            margin-right: 30px;
        }

        /* 盒子小字 */
        .word6 {
            font-size: 15px;
            font-weight: bold;
            color: #67586b;
            margin-left: 30px;
            margin-right: 23px;
        }

        /* 导航栏 */
        .boxtop {
            float: left;
            height: 40px;
            width: 830px;
            margin-left: 40px;
            margin-top: 25px;
            background-color: #fff;
        }

        /* 导航栏左侧 */
        .link~a {

            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            border-right: dashed;
            border-color: #030303;
            text-decoration: none;
            color: #703f9e;
        }


        /* 导航栏右侧 */
        .c {
            float: right;
        }

        /* 搜索栏 */
        .c1 {
            border-radius: 10px;
            margin-top: 10px;
        }

        /* 搜索框 */
        .c2 {
            float: right;
            font-size: 13px;
            color: #ffffff;
            width: 60px;
            height: 30px;
            border-radius: 5px;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 5px;
            line-height: 30px;
            text-align: center;
            background-color: #b2b2b2;
        }

        /* 中部盒子 */
        .boxcenter {
            float: left;
            background-color: #ffffff;
            width: 600px;
            height: 400px;
            margin-top: 10px;
            margin-left: 30px;
        }

        .d1 {
            height: 200px;
            border-bottom: dashed;
            border-color: #e4e4e4;

        }

        .d2 {
            height: 200px;
        }

        /* 文本段落 */
        p {
            text-indent: 2em;
        }

        h2 {
            text-align: center;
        }

        /* 阅读原文 */
        .link-text {
            display: block;
            width: 200px;
            border: solid;
            border-color: #030303;
            font-size: 30px;
            text-align: center;
            text-decoration: none;
            color: #030303;
            position: relative;
            left: 200px;
            top: 35px;
        }

        /* 右部盒子 */
        .boxright {
            float: left;
            background-color: #ffffff;
            width: 260px;
            height: 400px;
            margin-left: 20px;
            margin-top: 10px;
        }

        /* 右一 */
        .e1 {
            width: 260px;
            height: 50px;
            border-top:dashed;
            border-bottom: dashed;
            border-color: #e4e4e4;
            border-width: 5px;
            margin-top: 20px;
            line-height: 50px;
            text-align: center;
            color: #4c3d41;
            font-style: italic;
        }

        /* 右二 */
        .e2 {
            height: 90px;
            font-weight: 900;
            font-size: 20px;
            text-shadow:black 5px 5px 5px ;
            text-align: center;
            line-height: 90px;
        }

        /* 右三 */
        .e3 {
            height: 200px;
            width: 260px;
        }

        /* 底部盒子 */
        .boxbottom {
            color: #edd3bd;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="w">
        <div class="a1">BEAR BLOG</div>
        <div class="a2">
            <div class="al">bear.</div>
            <img class="ar" src="./pictures/men.jpg" alt="">
        </div>
    </div>
    <div class="boxf">
        <div class="boxleft">
            <div class="b1">
                <img class="btop" src="./pictures/men.jpg" alt="">
                <div class="word1"><strong>BEAR</strong></div>
                <div class="word2">这里是笨笨熊工作室</div>
                <div class="bbom">
                    <span>日历:</span><span class="word3">10</span>
                    <span>分类:</span><span class="word3">5</span>
                    <span>标签:</span><span class="word3">4</span>
                </div>
            </div>
            <div class="b2">
                <div class="picword">
                    <span class="iconfont">&#xe637;</span>
                    <span class="word4">联系方式</span>
                </div>
                <div class="picword1">
                    <span class="iconfont">&#xe887;</span>
                    <span class="word5">QQ</span>
                </div>
                <div class="picword1">
                    <span class="iconfont">&#xe654;</span>
                    <span class="word5">微信</span>
                </div>
                <div class="picword1">
                    <span class="iconfont">&#xe8ef;</span>
                    <span class="word5">Github</span>
                </div>
            </div>

            <div class="b3">
                <div class="picword">
                    <span class="iconfont">&#xe600;</span>
                    <span class="word4">友情链接</span>
                    <div>
                        <a href="#" class="word6">Tguide</a>
                        <a href="#" class="word6">W3cshhool</a>
                        <a href="#" class="word6">慕课网</a>
                        <a href="#" class="word6">传智播客</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="boxtop">
            <a href="#" class="link"></a>
            <a href="#">首页</a>
            <a href="#">分类</a>
            <a href="#">归档</a>
            <a href="#">搜索</a>
            <a href="#">关于</a>
            <div class="c">
                <form>
                    <input type="text" placeholder="bbx" class="c1">
                    <div class="c2">搜索</div>
                </form>
            </div>
        </div>
        <div class="boxcenter">
            <div class="d1">
                <h2>BEAR</h2>
                <p> 笨笨熊工作室，虽然成立较晚，但人才济济，有诸多大佬。这是，也有着一群志同道合的小伙伴；
                    有着融洽的字习氛围。加入这是，一起为工伯室的辉煌而奋斗，让我们把工作室的名字响彻校园，
                    收获更多的感动。
                </p>
                <a href="#" class="link-text">阅读原文>></a>
            </div>
            <div class="d2">
                <h2>BEAR</h2>
                <p> 笨笨熊工作室，虽然成立较晚，但人才济济，有诸多大佬。这是，也有着一群志同道合的小伙伴；
                    有着融洽的字习氛围。加入这是，一起为工伯室的辉煌而奋斗，让我们把工作室的名字响彻校园，
                    收获更多的感动。
                </p>
                <a href="#" class="link-text">阅读原文>></a>
            </div>
        </div>
        <div class="boxright">
            <div class="e1">来这里写下你的故事</div>
            <div class="e2">来这里写下你的故事</div>
            <img src="./pictures/bbx.jpg" alt="" class="e3">
        </div>
    </div>

    <div class="boxbottom">C笨笨熊工作室&nbspBEAR </div>



</body>

</html>